import React from "react";
import eventBus from "./utils/eventBus";

class World extends React.Component {
  /**
   * 控制组件是否需要走更新流程
   * @param {*} nextProps 最新的 props 数据
   * @param {*} nextState 最新的 state 数据
   * @returns 必须要有返回值
   *    - true    组件会更新。（会进入到 render 函数）
   *    - false   组件不会更新。（代码不会走到 render 函数）
   */
  shouldComponentUpdate(nextProps, nextState) {
    console.log("World nextProps", nextProps);
    console.log("World nextState", nextState);
    // 需求，props.age 如果为偶数则不更新
    // if (nextProps.age % 2 === 0) {
    //   return false;
    // }

    // 需求，判断 props 数据有更新才更新，否则不更新
    //    如何获取上一次的 props 或 state     this.props    this.state
    //    console.log("World", this.props === nextProps); // false
    //    1. 获取 props 中的属性集合
    const oldKeys = Object.keys(this.props);
    const newKeys = Object.keys(nextProps);
    //    2. 判断新旧的长度是否一致
    if (oldKeys.length !== newKeys.length) {
      // 有更新，需要更新
      return true;
    }

    //    3. 循环判断 key 对应的值是否有变动
    for (let i = 0; i < oldKeys.length; i++) {
      const oldKeyValue = this.props[oldKeys[i]];
      const newKeyValue = nextProps[oldKeys[i]];
      // PS: 代码不够健全。这里还需要判断值是否为对象，需要做递归比较
      if (oldKeyValue !== newKeyValue) {
        // 有变化，需要更新
        return true;
      }
    }

    return false;
  }

  render() {
    console.log("World render");

    return (
      <div>
        <h4>World</h4>
        <button onClick={() => this.forceUpdate()}>调用强制更新</button>
      </div>
    );
  }

  componentDidMount() {
    // 消息订阅
    eventBus.on("abcd", () => {
      console.log("World abcd");
    });
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("World getSnapshotBeforeUpdate prevProps", prevProps);
    console.log("World getSnapshotBeforeUpdate prevState", prevState);
    return "123";
  }

  /**
   * 组件更新完成
   */
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("World componentDidUpdate snapshot", snapshot);
  }
}

export default World;
